<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>#{msgs.superuserPageTitle}</title>
        <h:outputStylesheet library="css" name="bootstrap.css"/>
    </h:head>

    <h:body>
		<h2>#{msgs.superuserTitle}</h2>
        <h:form>
            <h3>#{msgs.addUserPrompt}</h3>
            <h:panelGrid columns="3">
            <h:outputText value="#{msgs.empIDPrompt}:" class="formLabel" />
            <h:inputText value="#{superuser.empID}" label="#{msgs.empIDPrompt}" required="true" id="addUserEmpID" />
            <h:message for="addUserEmpID" errorClass="error"/>
            <h:outputText value="#{msgs.pwdPrompt}:" class="formLabel" />
            <h:inputText value="#{superuser.password}" label="#{msgs.pwdPrompt}" required="true" id="addUserPassword" />
            <h:message for="addUserPassword" errorClass="error"/>
			<h:outputText value="#{msgs.empNamePrompt}:" class="formLabel" />
			<h:inputText value="#{superuser.empName}" label="#{msgs.empNamePrompt}" required="true" id="addUserEmpName" />
			<h:message for="addUserEmpName" errorClass="error"/>
            </h:panelGrid>
            <h:commandButton value="#{msgs.submit}" action="#{superuser.addUser}" />
            </h:form>
            <hr />
            <h:panelGroup>
            <h3>#{msgs.userTable}</h3>
            <h:form>
            <h:dataTable styleClass="table" value="#{superuser.names}" var="name">
            <h:column>
            <f:facet name="header">#{msgs.edit}</f:facet>
            <h:selectBooleanCheckbox value="#{name.editable}" onclick="submit()"/>
            </h:column>
            <h:column>
            <f:facet name="header">#{msgs.empID}</f:facet>
            <h:inputText value="#{name.empID}" rendered="#{name.editable}" style="width: 40px; text-align: center" size="10" readonly="true" />
            <h:outputText value="#{name.empID}" size="20" style="width: 40px" rendered="#{not name.editable}" />
            </h:column>
            <h:column>
            <f:facet name="header">#{msgs.pwdPrompt}</f:facet>
            <h:inputText value="#{name.password}" rendered="#{name.editable}" style="width: 150px" size="10" required="true" />
            <h:outputText value="#{name.password}" rendered="#{not name.editable}" />
            </h:column>
            <h:column>
            <f:facet name="header">#{msgs.empName}</f:facet>
            <h:inputText value="#{name.empName}" rendered="#{name.editable}" style="width: 200px" required="true" />
            <h:outputText value="#{name.empName}" rendered="#{not name.editable}" />
            </h:column>
            <h:column>
            <f:facet name="header">#{msgs.delete}</f:facet>
            <h:commandLink value="#{msgs.delete}" action="#{superuser.deleteUser(name)}" />
            </h:column>
            <h:column>
            <h:commandButton value="#{msgs.update}" action="#{superuser.updateUser(name)}"  rendered="#{name.editable}"/>
            </h:column>
            </h:dataTable>
            <h:commandButton value="#{msgs.logoutTitle}" action="#{login.logout}" />
            </h:form>
            </h:panelGroup>
    </h:body>

</html>